<template>
	<view class="container">
		<!-- 头部用户信息 -->
		<view class="user-header">
			<view class="avatar">
				<!-- <image src="/static/logo2.png" mode="aspectFill"></image> -->
			</view>
			<view class="user-info">
				<view class="user-name">{{ userInfo.name }}</view>
				<view class="user-phone">{{ userInfo.mobileNumber }}</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<view class="menu-item" @click="navigateToChangePassword">
				<view class="menu-left">
					<text class="menu-icon">🔒</text>
					<text class="menu-text">修改密码</text>
				</view>
				<text class="menu-arrow">›</text>
			</view>

			<view class="menu-item" @click="navigateToMyOrders">
				<view class="menu-left">
					<text class="menu-icon">📋</text>
					<text class="menu-text">我的订单</text>
				</view>
				<text class="menu-arrow">›</text>
			</view>
		</view>

		<!-- 个人信息展示 -->
		<view class="info-section">
			<view class="section-title">基本信息</view>
			<!-- <view class="info-item">
				<text class="info-label">年龄</text>
				<text class="info-value">{{ userInfo.age }}岁</text>
			</view>
			<view class="info-item">
				<text class="info-label">邮箱</text>
				<text class="info-value">{{ userInfo.email || '-' }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">身份证号</text>
				<text class="info-value">{{ maskIdCard(userInfo.idCard) }}</text>
			</view> -->
			<view class="info-item">
				<text class="info-label">司机状态</text>
				<text class="info-value">{{ driverStatusMap.get(userInfo.driverState) }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">入职时间</text>
				<text class="info-value">{{ formatTime(userInfo.entryTime) }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">紧急联系人</text>
				<text class="info-value">{{ userInfo.emergencyContactName }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">紧急联系电话</text>
				<text class="info-value">{{ userInfo.emergencyContactPhone }}</text>
			</view>
		</view>

		<!-- 退出登录 -->
		<button class="logout-btn" @click="handleLogout">退出登录</button>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { queryDriverInfo } from "@/api"
import { driverStatusMap } from "@/utils/constants.ts"
import { onPullDownRefresh } from "@dcloudio/uni-app"
import { formatTime } from "@/utils"
// 用户信息数据
const userInfo = ref({
})

onMounted(() => {
	// 在实际应用中，这里可以从本地存储或API获取用户信息
	loadUserInfo()
})

const reLoadUserInfo = () => {
	queryDriverInfo().then(res => {
		if (res.code === 200) {
			userInfo.value = res.data;
			uni.setStorageSync('data', userInfo.value)
		} else {
			uni.showToast({
				title: '获取用户信息失败',
				icon: 'none'
			})
		}
	}).finally(() => {
		uni.stopPullDownRefresh()
	})
}
// 加载用户信息
const loadUserInfo = () => {
	// 模拟从本地存储获取数据
	const savedUserInfo = uni.getStorageSync('data')
	console.log(savedUserInfo, "----------------------")
	if (savedUserInfo) {
		userInfo.value = savedUserInfo
	}
}
onPullDownRefresh(reLoadUserInfo)

// 跳转到修改密码页面
const navigateToChangePassword = () => {
	uni.navigateTo({
		url: '/pages/changePassword/index'
	})
}

// 跳转到我的订单页面
const navigateToMyOrders = () => {
	uni.navigateTo({
		url: '/pages/order/index'
	})
}

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '确认退出',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				// 清除token和用户信息
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				// 跳转到登录页面
				uni.reLaunch({
					url: '/pages/login/index'
				})
			}
		}
	})
}

// 身份证号脱敏
const maskIdCard = (idCard) => {
	if (!idCard || idCard.length < 8) return idCard || '-'
	const len = idCard.length
	const start = idCard.substring(0, 3)
	const end = idCard.substring(len - 4, len)
	return start + '*'.repeat(len - 7) + end
}

</script>

<style scoped>
.container {
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 用户头部信息 */
.user-header {
	background-color: #007AFF;
	padding: 40rpx;
	display: flex;
	align-items: center;
}

.avatar {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	background-color: green;
	overflow: hidden;
	margin-right: 30rpx;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.user-info {
	color: #fff;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.user-phone {
	font-size: 28rpx;
	opacity: 0.9;
}

/* 菜单区域 */
.menu-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 0 40rpx;
}

.menu-item {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-left {
	display: flex;
	align-items: center;
}

.menu-icon {
	font-size: 40rpx;
	margin-right: 20rpx;
}

.menu-text {
	font-size: 32rpx;
	color: #333;
}

.menu-arrow {
	font-size: 40rpx;
	color: #ccc;
}

/* 信息展示区域 */
.info-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx 40rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 30rpx;
	color: #666;
}

.info-value {
	font-size: 30rpx;
	color: #333;
	text-align: right;
	flex: 1;
	margin-left: 30rpx;
}

/* 退出登录按钮 */
.logout-btn {
	width: 90%;
	height: 90rpx;
	background-color: #fff;
	color: #ff4d4f;
	font-size: 34rpx;
	border-radius: 10rpx;
	margin: 60rpx auto;
	border: 1rpx solid #ff4d4f;
}
</style>
